import * as React from 'react';

import * as Global from '../TS/Global';

export interface MessageBoxProps extends Global.Myprops {
    MessageType?: string;
    Title?: string;
    Content?: any;
    Ok?: Global.MyEvent;
    Cancel?: Global.MyEvent;
    IsError?: boolean;
    IsShow?: boolean;
};

interface MessageBoxState {
    Content : any;
    IsError : boolean;
    Title?: string;
    IsShow : boolean;
};

export class MessageBox extends React.Component < MessageBoxProps,
MessageBoxState > {

    constructor(props) {
        super(props);
        //设置状态
        this.state = {
            IsShow: props.IsShow != undefined
                ? props.IsShow
                : false,
            Content: props.Content != undefined
                ? props.Content
                : "",
            Title: props.Title
                ? props.Title
                : "提醒",
            IsError: props.IsError != undefined
                ? props.IsError
                : false
        };

    }
    public Show() : void {
        this.setState({IsError: false});
        $(this.refs.dialog).modal('show');
    }
    public ShowError(msg : any) : void {
        this.setState({IsError: true, Content: msg});
        $(this.refs.dialog).modal('show');
    }
    //下一步进行显示 进行初始化
    componentDidMount() {
        console.log("显示");

        if (this.state.IsShow) {
            this.Show();
        }

    }
    public handleClick(e : React.MouseEvent < any >) : void {}
    public handleChange(event : React.ChangeEvent < any >) : void {

        console.log(event.target.value);
    }

    public render() : JSX.Element {
        let footer;
        if (this.props.MessageType == "alert") {
            footer = <div className="modal-footer center-block">
                <button
                    type="button"
                    className="btn btn-primary"
                    data-dismiss="modal"
                    onClick={this.props.Ok}>{Global.GetLocal("确定")}</button>
            </div>;

        } else {
            footer = <div className="modal-footer center-block">
                <button type="button" className="btn btn-default" data-dismiss="modal">{Global.GetLocal("取消")}</button>
                <button
                    type="button"
                    className="btn btn-primary"
                    data-dismiss="modal"
                    onClick={this.props.Ok}>{Global.GetLocal("确定")}</button>
            </div>;
        }

        return (

            <div className="modal fade " id="modal-id" ref="dialog">
                <div className="modal-dialog">
                    <div className="modal-content ">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 className="modal-title">{this.props.Title}</h4>
                        </div>
                        <div
                            className={`modal-body ${this.state.IsError
                            ? 'bg-danger'
                            : ''}`}>
                            {this.state.Content}
                        </div>
                        {footer}
                    </div>
                </div>
            </div>

        );
    }
}